
<style>
.im {
  width: 100%;
  height: auto;
}
.el-carousel-item img {
  width: 100%;
  height: inherit;
  border-radius: 10px
}
.t1 {
  margin-top: 25px;
}

.hname {
  font-size: 35px;
  font-weight: bold;
  color: #0F294DFF;
  display: flex;
  margin: 10px;
}
::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
}
.tab {
  margin-top: 2px;
}

.img1{
  width: 100%;
  height: 100%;
}
.item-room{
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 10px 0 10px;
}
.item-pf{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003B95;
  color: white;
  font-size: 0.9rem;
  border-radius: 10px 10px 10px 0px;
}
.item-pl{
  margin-right: 10px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.item-title{
  color: #00224F;
  font-size: 1.9rem;
  font-weight: bold;
}
.item-pl-span{

}
.item-pl-span2{
  font-size: 0.7rem;
  color: #ACACAC;
}
.item-ms{
  margin-top: 5px;
}
.item-cbl{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.item-sc-love{
  width: 35px;
  height: 35px;
  position: absolute;
  border-radius: 50%;
  z-index: 10;
  background-color: white;
  margin-left:5px;
  margin-top: 5px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-sc-love:active{
  transform: scale(0.9);
}
.item-label{
  padding: 2px 5px 2px 5px;
  background-color: #003B95;
  color: white;
  border-radius: 2px;
  margin-right: 5px;
}

</style>

<template>
  <div class="main-content">
    <div class="im">
      <el-carousel arrow="never" :autoplay="true" height="380px" indicator-position="outside" :interval="4000">
        <el-carousel-item v-for="item in hotelData.imageList" :key="item">
          <el-image :src="visitPath()+item.img" alt="" class="img1" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row style="width: 100vw ;padding: 0 40px 20px 40px;min-height: 500px">
        <div class="tab">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="概览" name="first">
              <div class="t1">
                <div class="hname">{{ hotelData.name }}</div>
                <div calss="hdescri">
                  <div v-for="(item,index) in hotelData.introduce">
                    <div v-if="index!==0" style="font-weight: bold;color: #003B95;font-size: 1.2rem;margin: 10px 0 10px 0">{{item.title}}</div>
                    <div style="color: rgba(119,118,118,0.65);text-indent: 2em;">{{item.content}}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="预定房间" name="second">
              <div class="block">
                <div v-for="item in hotelData.roomList" style="display: flex;margin-bottom: 30px;position: relative">
                  <div style="height: 180px;width: 280px;position: relative">
                    <div class="item-sc-love" @click="scLoveFun(item)">
                      <img v-if="item.collectStatus" src="@/assets/imgs/sc-red.png"
                           style="width: 25px;height: 25px;margin-top: 2px">
                      <img v-else src="@/assets/imgs/sc.png"
                           style="width: 25px;height: 25px;margin-top: 2px">
                    </div>
                   <el-image style="width: 100%;height: 100%" :src="visitPath()+item.imageList[0].img"></el-image>
                 </div>
                  <div class="item-room">
                    <div style="width: 60%">
                       <div>
                         <span class="item-title">{{item.roomName}}</span>
                         <span v-for="item in item.grade">
                           <i class="el-icon-star-on" style="color: #FFB700"></i>
                         </span>
                       </div>
                      <div style="color: #00224F">
                        <span>￥</span>
                        <span style="font-weight: bold;font-size: 1.5rem">{{item.price}}</span></div>
                      <div class="item-ms">
                        <span v-for="item2 in item.deviceList" class="item-label">
                          {{item2.label}}
                        </span>
                        <span>
                          {{item.description}}
                        </span>
                      </div>
                    </div>
                    <div class="item-cbl">
                      <div>
                        <div style="display: flex">
                          <div class="item-pl">
                            <div class="item-pl-span">{{dictStatus(dict4,item.label)}}</div>
                            <div class="item-pl-span2">{{item.review}}人住客评论</div>
                          </div>
                          <div class="item-pf">
                            {{item.score}}
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: -40px">
                        <el-button style="color: white; background-color: #00224F" @click="submitFun(item)">立即预定</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评价" name="fourth">
              <div v-if="commentList.length>=1" style="width: 100%;margin-top: 10px" v-for="item in commentList">
                <!--用户信息-->
                <div style="display: flex;justify-content: space-between">
                  <div style="display: flex;align-items: center;">
                    <img style="width: 35px;height: 35px;border-radius: 50%" :src=" visitPath()+item.userInfo.avatar"/>
                    <span style="margin-left: 10px;font-weight: bold;color: rgba(108,108,108,0.65)">{{item.userInfo.username}}</span>
                  </div>
                  <div>
                    <div style="width: 30px;height: 30px;
                    background-color: #003B95;color: white;
                    border-radius: 5px;justify-content: center;
                    align-items: center;display: flex">{{item.score}}</div>
                  </div>
                </div>
                <div style="width: 100%;margin:10px 0 10px 0">
                  <el-rate
                      style="margin-top: 9px"
                      disabled
                      v-model="item.score/2"
                      show-text>
                  </el-rate>
                </div>
                <!--评论内容-->
                <div>
                  <span>{{item.createTime}}</span>
                  <span> , </span>
                  <span>{{item.roomInfo.roomName}}</span>
                  <span> , </span>
                  <span>{{item.comment}}</span>
                </div>
                <div style="width: 100%;height: 0.1px;background-color: #e8e8e8;margin:10px 0 10px 0"></div>
              </div>
              <div v-else>
                <el-empty   description="暂无评论"></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
    </el-row>


    <el-dialog title="预定酒店" :visible.sync="dialogFormVisible" width="450">
      <el-form :model="form" label-width="450">
        <el-form-item label="预定房型" label-width="650">
            <div style="display:flex; justify-content: space-between ;">
              <div >
                <el-input
                    placeholder="预定房型"
                    disabled
                    v-model="form.roomName"
                    style="width: 220px">
                </el-input>
              </div>
              <div style="display: flex">
                <label style="width: 65px">房型单价</label>
                <el-input
                    placeholder="房型单价"
                    disabled
                    v-model="form.price"
                    style="width: 205px">
                </el-input>
              </div>
            </div>
        </el-form-item>
        <el-form-item label="入住时间" label-width="450">
          <div style="display:flex;justify-content: space-between">
            <el-date-picker
                v-model="form.startDate"
                type="date"
                @change="changDateFun"
                placeholder="入住时间">
            </el-date-picker>

            <div>
              <label style="margin: 0 10px 0 0">入住时长</label>
              <el-select v-model="form.nights" @change="changeNightsFun" placeholder="请选择入住时长" >
                <el-option v-for="item in 30" :label="item+'晚'" :value="item"></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label-width="450" :label="'入 住 人'+(index+1)"  v-for="(item,index) in form.peopleList">
          <div style="display: flex" >
            <el-input placeholder="预定人" maxlength="5" v-model="item.realName"></el-input>
            <el-input placeholder="预定人手机号"
                      style="margin: 0 5px 0 5px"
                      maxlength="11"
                      v-model="item.phone"></el-input>
            <el-input placeholder="预定身份证号"
                      maxlength="18"
                      v-model="item.sdcard"></el-input>
            <el-button style="margin-left: 5px" @click="deleteFun(index)"
                       type="danger" icon="el-icon-delete">
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="总价金额" label-width="450">
          <div style="display:flex; justify-content: space-between">
            <div>
              <el-input v-model="form.totalPrice"
                  placeholder="总价"
                  disabled style="width: 220px">
              </el-input>
            </div>
            <div style="display: flex">
              <label style="width: 65px">添加人员</label>
              <el-button size="small"
                  type="primary" icon="el-icon-circle-plus"
                  style="width: 205px" @click="addHunmFun()">添加入住人</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="房型状态" label-width="450">
          <div style="display:flex; justify-content: space-between;color: white;">
            <span style="padding: 1px 8px 1px 8px;border-radius: 2px" :style="form.roomStatus? 'background-color: red':'background-color: #58d958'">
              {{form.roomStatus?'今日该房型满房':'空闲'}}
            </span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -50px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.roomStatus" type="primary" @click="addOrderFun()">预 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>

import {queryHotel} from "@/Interface/HotelApi";
import {visitPath} from "@/Interface/FileApi";
import {queryDictItem} from "@/Interface/DictApi";
import {backLogin, dictStatus, isEmpty} from "@/Config/Tool";
import {queryRoomStatus} from "@/Interface/RoomStatusApi";
import {addCollect, deleteCollect, queryCollect} from "@/Interface/CollectApi";
import moment from "moment";
import {addOrder} from "@/Interface/OrderApi";
import {queryComment} from "@/Interface/Comment";

export default {

  data() {
    let hotelId = this.$route.query.id
    return {
      hotelData: {},
      typeData: [],
      hotelId: hotelId,
      activeName: 'second',
      dict2:[],
      dict3:[],
      dict4:[],
      dict5:[],
      dialogFormVisible: false,
      roomStatusList:[],
      commentList:[],
      form: {
        userId:localStorage.getItem("userId")*1,
        peopleList:[
          {
            realName:"",
            sdcard:"",
            phone:""
          }
        ],
        hotelId:"",
        roomName:"",
        totalPrice:"0.00",//
        roomId:"",
        nights:0,
        price:"",
        startDate:"",//
        endDate:"",//
        roomStatus:true,
      },
    }
  },
  watch:{
  },
  mounted() {
    backLogin("USER")
    this.queryDictItemFun([2,3,4,5]);
    this.queryHotelFun();
    this.queryCommentFun();
 },
  methods: {
    dictStatus,
    visitPath() {
      return visitPath;
    },
    /**
     * 点击分类
     */
    handleClick(e){

    },
    /**
     * 立即预定(模态)
     */
    submitFun(item){
      this.form={
          userId:localStorage.getItem("userId")*1,
          peopleList:[
            {
              realName:"",
              sdcard:"",
              phone:""
            }
          ],
          roomName:item.roomName,
          totalPrice:item.price,//
          hotelId:item.hotelId,
          roomId:item.id,
          nights:1,
          price:item.price,
          roomStatus:false,
          startDate:moment().format("YYYY-MM-DD"),//
          endDate:moment().add(1,"days").format("YYYY-MM-DD"),//
      }
      this.dialogFormVisible = true;
      this.queryRoomStatusFun();
    },
    /**
     * 添加人员
     */
    addHunmFun(){
      this.form.peopleList.push({
        realName:"",
        sdcard:"",
        phone:""
      })
    },
    /**
     * 删除人员
     */
    deleteFun(index){
      this.form.peopleList.splice(index,1);
    },
    /**
     * 修改时间
     */
    changDateFun(e){
      let momentDate = moment(e).format("YYYY-MM-DD")
      this.form.startDate = momentDate;
      this.form.endDate = moment(momentDate).add(this.form.nights,"days").format("YYYY-MM-DD")
      this.queryRoomStatusFun();
    },
    /**
     * 修改入住时长
     */
    changeNightsFun(e){
      this.form.totalPrice=this.form.price*e;
    },
    /**
     * 提交预定
     */
    addOrderFun(){
      let param={
        userId:localStorage.getItem("userId")*1,
        peopleList:this.form.peopleList,
        hotelId:this.form.hotelId,
        roomId:this.form.roomId,
        nights:this.form.nights,
        price:this.form.totalPrice,
        startDate:this.form.startDate,
        endDate:this.form.endDate
      }
      let pass = true;
      this.form.peopleList.map(item=>{
        if (isEmpty(item.sdcard)||isEmpty(item.phone)||isEmpty(item.realName)){
          pass=false;
        }
      })

      if (pass){
        addOrder(param).then(res=>{
          console.log(res);
          if (res.code===200){
            this.$message.success(res.msg);
            this.dialogFormVisible = false;
          }else {
            this.$message.error(res.msg)
          }
        })
      }else {
        this.$message.error('请完整填写用户信息！')
      }

    },

    /**
     * 查询酒店信息
     */
    queryHotelFun(){
      var that =this;
      queryHotel({id:this.hotelId*1}).then(res=>{
        if (res.code===200){
          queryCollect({userId:localStorage.getItem("userId")*1}).then(res2=>{
            if (res2.code===200){
              res.data.roomList.map(item=>{
                res2.data.forEach(item2=>{
                  if ((item.id.toString())===(item2.roomId.toString())){
                    item.collectStatus=true;
                  }
                })
              })
              that.hotelData = res.data;
            }else {
              that.hotelData = res.data;
            }
          })
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 查询字典值
     */
    queryDictItemFun(e){
      e.forEach(item=>{
        queryDictItem({id:item}).then(res=>{
          switch (item){
            case 2:
              this.dict2 = res.data;
              break;
            case 3:
              this.dict3 = res.data;
              break;
            case 4:
              this.dict4 = res.data;
              break;
            case 5:
              this.dict5 = res.data;
              break;
            default:
              this.dict4 = res.data;
              break;
          }
        })
      })
    },
    /**
     * 收藏事件
     */
    scLoveFun(item){
      //取消收藏
      if (item.collectStatus){
        deleteCollect({
          userId: localStorage.getItem("userId")*1,
          hotelId: this.hotelData.id,
          roomId: item.id
        }).then(res=>{
          if (res.code===200){
            this.$message.success(res.msg);
            item.collectStatus = false
          }else {
            this.$message.error(res.msg)
          }
        })
      }
      //添加收藏
      else {
        addCollect({
          userId: localStorage.getItem("userId")*1,
          hotelId: this.hotelData.id,
          roomId: item.id
        }).then(res=>{
          if (res.code===200){
            item.collectStatus = true;
            this.$message.success(res.msg)
          }else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    /**
     * 查询房型记录
     */
    queryRoomStatusFun(){
      let param={
        startDate:this.form.startDate,
        roomId:this.form.roomId
      }
      queryRoomStatus(param).then(res=>{
        this.roomStatusList = res.data;
        if (res.data.length>=1){
          this.form.roomStatus=true;
        }else {
          this.form.roomStatus=false;
        }
      })
    },
    /**
     * 查询评论信息
     */
    queryCommentFun(){
      queryComment({hotelId:this.hotelId*1}).then(res=>{
        if (res.code===200){
          this.commentList=res.data;
        }else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>
